import React, { useState, useRef, useEffect } from 'react';
import { Modal, InputNumber, Button, Row, Col, Space } from 'antd';
import { v4 as uuidv4 } from 'uuid';
import './index.less'
const XComponents = (props) => {
    const { xList = [], val, children, gd = false } = props
    if (xList.includes(val)) {
        return <div className='SeatMapModal_seat_x'>
            {children}
            {gd && <div className='SeatMapModal_seat_xConponents'></div>}
        </div>
    }
    return children
}
const SeatEditor = (props) => {
    const { visible = {} } = props
    const { show, type = 'install' } = visible
    const [data, setData] = useState({
        rowCount: 10,
        ColCount: 10,
        list: [],
        xList: [],
        yList: []
    })

    const { rowCount, ColCount, list, xList, yList } = data
    const initSetData = () => {
        const seatMap = new Map();
        list.forEach(seat => {
            seatMap.set(`${seat.x}-${seat.y}`, seat);
        });

        const newSeats = [];
        for (let x = 1; x <= rowCount; x++) {
            for (let y = 1; y <= ColCount; y++) {
                const key = `${x}-${y}`;
                const existingSeat = seatMap.get(key);

                if (existingSeat) {
                    newSeats.push(existingSeat);
                } else {
                    newSeats.push({
                        x,
                        y,
                        id: uuidv4(),
                        status: 'available',
                    });
                }
            }
        }
        setData({
            ...data,
            list: newSeats
        });
    }
    useEffect(() => {
        initSetData()
    }, [data.rowCount, data.ColCount])
    // console.log(new Set(list.map(val => {
    //     return val.y
    // })))
    const ColLiner = new Set(list.map(val => {
        return val.y
    }))
    const RenderItemList = (props) => {
        const { data } = props
        return <div className='SeatMapModal_seat_list'>
            {list.filter(val => {
                return val.y === data
            }).map((val, index) => {
                const { status, x } = val

                return <div style={yList.includes(x) ? { marginRight: 24 } : {}} className={`SeatMapModal_seat_listItem ${status === 'available' ? 'SeatMapModal_seat_listCheck' : 'SeatMapModal_seat_listNoCheck'}`}></div>
            })}
        </div>
    }
    return (
        <Modal
            title="线下课预约座位排布"
            visible={true}
            width={800}
            // onCancel={() => setVisible(false)}
            footer={null}
        >
            <div className='SeatMapModal_box'>
                <div className='SeatMapModal_desc_box'>
                    这里是教室名称，共计{list.length}个座位
                </div>
                <div className=''>
                    <div>
                        <Space>
                            <Button onClick={() => {
                                setData({
                                    ...data,
                                    xList: [...xList, '']
                                })
                            }} type='link'>
                                添加 列过道
                            </Button>
                            {xList.map((item, index) => {
                                return <InputNumber onChange={(e) => {
                                    console.log(e)
                                    setData({
                                        ...data,
                                        xList: xList.map((items, o) => {
                                            if (o === index) {
                                                return e
                                            }
                                            return items
                                        })
                                    })
                                }} key={index} max={ColCount} value={item}></InputNumber>
                            })}
                        </Space>
                    </div>
                    <div style={{ marginTop: 12 }}>
                        <Space>
                            <Button onClick={() => {
                                setData({
                                    ...data,
                                    yList: [...yList, '']
                                })
                            }} type='link'>
                                添加 纵过道
                            </Button>
                            {yList.map((item, c) => {
                                return <InputNumber onChange={(e) => {
                                    setData({
                                        ...data,
                                        yList: yList.map((val, s) => {
                                            if (c === s) {
                                                return e
                                            }
                                            return val
                                        })
                                    })
                                }} key={c} max={ColCount} value={item}></InputNumber>
                            })}

                        </Space>
                    </div>
                </div>
                <div className='SeatMapModal_seat_setting'>
                    座位设置：
                    <div>
                        <Space className='SeatMapModal_seat_handle'>
                            <div>
                                纵
                            </div>
                            <InputNumber onChange={(e) => {
                                setData({
                                    ...data,
                                    ColCount: e
                                })
                            }} value={ColCount}></InputNumber>
                            <div>
                                列
                            </div>
                            <InputNumber onChange={(e) => {
                                setData({
                                    ...data,
                                    rowCount: e
                                })
                            }} value={rowCount}></InputNumber>
                        </Space>
                        <div style={{ marginTop: 20, color: 'rgba(255, 60, 75, 1)' }}>
                            点击单个座位可删除该座位
                        </div>
                        <div className='SeatMapModal_seat_list'>
                            <div className='SeatMapModal_seat_liner'>
                                {ColLiner.map((item, index) => {
                                    return <XComponents val={index} xList={xList} yList={yList}>
                                        <div key={index} className='SeatMapModal_seat_count'>
                                            {item}
                                        </div>
                                    </XComponents>

                                })}

                            </div>
                            <div style={{ position: 'relative' }}>
                                {yList.sort().filter(val => {
                                    return val
                                }).map((val, index) => {
                                    if (!val) {
                                        return null
                                    }
                                    return <div style={{ left: val * '26' + index * 18 + 'px' }} className='SeatMapModal_seat_yComponents' key={index}></div>
                                })}
                                {ColLiner.map((val, index) => {
                                    return <XComponents gd={true} val={index} xList={xList} yList={yList}>

                                        <RenderItemList data={val}></RenderItemList>
                                    </XComponents>
                                })}
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </Modal>
    );
};

export default SeatEditor;